<template>
	<div class="mainContent">
		<div class="bread-nav">
			<span class="bread-item">仓储管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">调拨管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item activeNavs" @click="toInside" >调拨入库</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">待入库操作</span>
		</div>
		<!-- <pathTracking :path="Model.path" /> -->
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="调拨入库单详情" name="1"></el-tab-pane>
				
			</el-tabs>
			<div class="tabBox">
				
				<el-row class="detailTable">
					<el-form :inline="true">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tabFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<div class="tabBoxStep">
					<el-steps :active="Model.refundStep.activeStep">
						<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
					</el-steps>
				</div>
				<el-row class="detailTable">
					<div class="detailTableItemTitle">
						<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
						<p class="text">订单基础信息</p>
						<img class="detailTableImgNormal" src="@/assets/img/icon_edit.png" @click="onDialogEdit(true,'tableFormInline')">
						<img class="detailTableImgNormal" :src="Model.detailTableFrom.src" alt="" @click="toggleTableDetail('detailTableFrom')">
					</div>
					<el-form :inline="true" v-show="Model.detailTableFrom.flag">
						<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
							<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
						</el-col>
					</el-form>
				</el-row>
				<!-- **********************************************               tab1  订单详情                 ************************************** -->
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">商品明细 — 应入</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table stripe :data="Model.tab1TableData" border show-summary :summary-method="getSummaries" @selection-change="handleSelectionChange">
								<el-table-column type="index" align="center" width="50" label="序号" fixed></el-table-column>
								<el-table-column
									align="center" 
									label='商品图片'
									>
									<template slot-scope="scope">
										<div class="scopecont">
											<el-tooltip placement="top" effect="light">
											  <div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
											  <img class="mainTableImg" :src="scope.row.photoUrl" alt="">
											</el-tooltip>
										</div>
									</template>
								</el-table-column>
								<el-table-column 
								align="center" 
								v-for="(item,index) in Model.tab1TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
							</el-table>
						</div>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">商品明细 — 实入</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail2.src" alt="" @click="toggleTableDetail('tab1TableDetail2')">
						</div>
						<el-row class="rows basic">
							<el-col :sm="12" :md="8" :lg="6">
								<div class="items" v-on:keyup.enter="codeEntry">
									<el-input type="text" v-model="Model.inputCode"></el-input>
								</div>
							</el-col>
							<span class="queryInputCode" @click="codeEntry">确定</span>
						</el-row>
						<el-row class="rows basic">
							<span class="queryInputCode del" @click="deleteTable">删除</span>
						</el-row>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail2.flag">
							<el-table stripe :data="Model.tab1TableData2" border :row-style="selectedHighlight"  @selection-change="handleSelectionChange">
								<el-table-column type="selection" width="50" fixed></el-table-column>
								<el-table-column
									align="center" 
									label='商品图片'
									>
									<template slot-scope="scope">
										<div class="scopecont">
											<el-tooltip placement="top" effect="light">
											  <div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
											  <img class="mainTableImg" :src="scope.row.photoUrl" alt="">
											</el-tooltip>
										</div>
									</template>
								</el-table-column>
								<el-table-column 
								align="center" 
								v-for="(item,index) in Model.tab1TableHeader"
								:key="index"
								:prop="item.prop" 
								:label="item.label" 
								:width="item.width">
								</el-table-column>
								<el-table-column
									align="center" 
									label='数量'
									>
									<template slot-scope="scope">
										<div class="scopecont" v-if="scope.row.isBatchNo">
											{{scope.row.mainQuantity}}
										</div>
										<div class="scopecont" v-else>
											<el-input-number v-model="scope.row.mainQuantity" :min="1" :max="10" label="数量"></el-input-number>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<el-row class="bottom">
					<div class="btn_group">
						<div class="btn_item" @click="onConfirmNew">确认入库</div>
						<div class="btn_item cancel" @click="cancelOrder">取消</div>
					</div>
				</el-row>
			
			</div>
		</div>
		<!-- 弹框 -->
		<!-- <el-dialog :visible.sync="Model.editDialogFlag" top="100px" class="viewDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">弹框</div>
			</div>
			<div style="padding:30px;background: #fff;">
				
			</div>
		</el-dialog> -->
		
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "storageOperating",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
